<!--  -->
<template>
  <ul id="BAM-orderSetting">
    <li>
      <span>秒杀订单超过:</span>
      <el-input placeholder="请输入内容" v-model="secondOrder" style="width:270px">
        <template slot="append">分</template>
      </el-input>
      <span>未付款，订单自动关闭</span>
    </li>
    <li>
      <span>正常订单超过:</span>
      <el-input placeholder="请输入内容" v-model="normalOrder" style="width:270px">
        <template slot="append">分</template>
      </el-input>
      <span>未付款，订单自动关闭</span>
    </li>

    <li>
      <span>发货超过:</span>
      <el-input placeholder="请输入内容" v-model="deliverGoods" style="width:270px">
        <template slot="append">天</template>
      </el-input>
      <span>未收货，订单自动完成</span>
    </li>
    <li>
      <span>订单完成超过:</span>
      <el-input placeholder="请输入内容" v-model="closeTheDeal" style="width:270px">
        <template slot="append">天</template>
      </el-input>
      <span>自动结束交易，不能申请售后</span>
    </li>
    <li>
      <span>订单完成超过:</span>
      <el-input placeholder="请输入内容" v-model="fiveStarHighPraise" style="width:270px">
        <template slot="append">天</template>
      </el-input>
      <span>自动五星好评</span>
    </li>
    <li>
      <el-button type="primary" @click="submit">提交</el-button>
    </li>
  </ul>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      secondOrder: "",
      normalOrder: "",
      deliverGoods: "",
      closeTheDeal: "",
      fiveStarHighPraise: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    submit() {
      let ordersetup = {
        secondOrder: this.secondOrder,
        normalOrder: this.normalOrder,
        deliverGoods: this.deliverGoods,
        closeTheDeal: this.closeTheDeal,
        fiveStarHighPraise: this.fiveStarHighPraise,
      };
      window.localStorage.setItem("ordersetup", JSON.stringify(ordersetup));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // console.log(window.localStorage.ordersetup);
    let ordersetup = {};
    if (window.localStorage.ordersetup == undefined) {
      ordersetup = {
        secondOrder: "60",
        normalOrder: "120",
        deliverGoods: "15",
        closeTheDeal: "7",
        fiveStarHighPraise: "7",
      };
    //   console.log(ordersetup);
      window.localStorage.setItem("ordersetup", JSON.stringify(ordersetup));
    }

    ordersetup = JSON.parse(window.localStorage.getItem("ordersetup"));
    this.secondOrder = ordersetup.secondOrder;
    this.normalOrder = ordersetup.normalOrder;
    this.deliverGoods = ordersetup.deliverGoods;
    this.closeTheDeal = ordersetup.closeTheDeal;
    this.fiveStarHighPraise = ordersetup.fiveStarHighPraise;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'  scoped>
#BAM-orderSetting {
  width: 800px;
  margin-left: 100px;
  border: 1px solid #cccccc;
  padding: 5px 5px 10px;
  li {
    width: 700px;
    margin: 0 50px;
    display: flex;
    margin-top: 20px;
    span {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      &:nth-child(1) {
        width: 150px;
        text-align: right;
      }
    }
    &:nth-child(6) {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>